<!-- 订单列表 -->
<template>
<div class="order-list">
  <c-header :title="'订单列表'"></c-header>
  <van-tabs @click="handleTabClick" :active="active" sticky>
    <van-tab v-for="(tab,index) in tabs" :title="tab" :key="index">
      <van-pull-refresh v-model="isLoading">
        <div class="order-list-content" v-for="i in 10">
          <van-panel title="订单号 158545422142214" status="待收货">
            <van-card title="单体门磁传感器" desc="测试服务商品，请勿购买" num="2" price="2.00" :thumb="imageURL" />
            <div slot="footer" class="ft">
              <van-button size="small" type="danger" @click="toSubmit">确认收货</van-button>
              <van-button size="small" @click="toLogistics">查看物流</van-button>
            </div>
          </van-panel>
        </div>
      </van-pull-refresh>
    </van-tab>
  </van-tabs>
</div>
</template>
<script>
export default {
  data() {
    return {
      active: this.$route.params.id,
      imageURL: 'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/wlsq/shop/goods_img/20170427165224606877.jpg?x-oss-process=image/resize,m_fixed,h_90,w_90,limit_0',
      tabs: ['全部订单', '待付款', '待发货', '待收货'],
      isLoading: false
    }
  },
  methods: {
    handleTabClick(index) {
      this.$toast(index);
    },
    toLogistics() {
      this.$router.push({
        path: '/logistics'
      })
    },
    toSubmit() {
      this.$dialog.confirm({
        title: '收货确认',
        message: '确认收货后不可退货或者退款，请您收到货后再点击"确认"'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
    }
  },
  watch: {
    '$route' (to, from) {
      this.active = to.params.id;
      let id = to.params.id;
      if(id){
        console.log(id);
      }
    },
    isLoading() {
      if (this.isLoading) {
        setTimeout(() => {
          this.$toast({
            message: '刷新成功',
            duration: 500
          });
          this.isLoading = false;
        }, 1000);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/common.scss';
.order-list {
    background-color: #fafafa;
    height: 100vh;
    &-content {
        margin-top: px2rem(10px);
        .ft {
            height: px2rem(50px);
        }
    }
}
.van-button:first-child {
    float: right;
    margin-right: 0;
}
.van-button+.van-button {
    float: right;
    margin-right: px2rem(5px);
}
</style>
